import { useState, useEffect, useContext, useRef } from 'react'
import useBusinessMap from '../../../../../../common/BusinessMap/useBusinessMap';
import DarkCard from '../../../../../../common/DarkCard';
import { Button, Descriptions, Divider, InputNumber, Radio, Space, Table } from 'antd';
import GlobalContext from '../../../../../../../utils/GlobalContext';
import { CloseOutlined } from '@ant-design/icons';
import PanelRight from '../../../../../../common/PanelRight';
import LittleTitle from '../../../../../../common/LittleTitle';
import { resourcePath } from '../../../../../../../utils/resource';
import { drawCircle, wktToGeom } from '../../../../../../../utils/helper/mapHelper';
import CztApi from '../../../../../../../utils/apis/CztApi';
import JzzyApi from '../../../../../../../utils/apis/JzzyApi';
import JcyjApi from '../../../../../../../utils/apis/JcyjApi';
import { fromCircle } from 'ol/geom/Polygon';
import ScrollTable from '../../../../../../common/ScrollTable';
import rangeDisplayIcon from '../../rangeDisplayIcon';
import jcyjContext from '../../jcyjContext';

export default function RcxDetail(props) {
    const map = useBusinessMap();

    const { setIsClosed } = useContext(jcyjContext)
    const { item } = props;

    const [radius, setRadius] = useState();
    const [ypType, setYpType] = useState(1);
    const [yqList, setYqList] = useState();
    const [yxList, setYxList] = useState();



    const [datas, setDatas] = useState();
    const [total, setTotal] = useState();
    const [params, setParams] = useState({
        pageNum: 1,
        pageSize: 5
    });
    const rootRef = useRef();

    //向父组件返回数据
    //向父组件返回数据
    const [data1, setData1] = useState();
    const { setDatas1, setDatas2, setDatas3 } = props;
    const handleButtonClick = (record) => {
        // 根据 record 中的数据执行相应的操作
        // console.log('点击了按钮，当前行数据：', record);
        setDatas1(record.name);
        setDatas2(data1);
        setDatas3(ypType);
    };


    // useEffect(() => {
    //     if (ypType && map && radius) {
    //         //console.log('item',item.geom)
    //         const center = wktToGeom(item.geom).getCoordinates();
    //        /*  const center = map.getView().getCenter(); */
    //         const circle = drawCircle(map, center, radius);
    //         setData1(circle);
    //         if (ypType === 1) {
    //             CztApi.listByPolygon(fromCircle(circle)).then(resp => {
    //                 setYxList(resp.data)
    //                 rangeDisplayIcon(resp.data, circle, map, ypType,"nowkt");
    //             })
    //         } else {
    //             JzzyApi.listByPolygon(fromCircle(circle)).then(resp => {
    //                 setYxList(resp.data)
    //                 rangeDisplayIcon(resp.data, circle, map, ypType,"nowkt");
    //             })
    //         }
    //     }
    //     return () => {
    //         const allLayers = map.getLayers().getArray();
    //         [...allLayers].forEach(l => {
    //             if (l?.get("layerName") === 'rangeDisplayIcon')
    //                 map.removeLayer(l);
    //         })
    //     }
    // }, [ypType, map, radius,item])

    useEffect(() => {
        JcyjApi.gkDetail_findby(params).then(resp => {
            setDatas(resp.rows);
            setTotal(resp?.total);
        })
    }, [params])

    const [currentPanel, setCurrentPanel] = useState(1);
    const handleChange = (e) => {
        setCurrentPanel(e.target.value);

    }

    useEffect(() => {
        if (currentPanel === 3) {
            setIsClosed(false)
        } else {
            setIsClosed(true)
        }
    }, [currentPanel, setIsClosed])

    return item ? <PanelRight>
        <div style={{
           
            // border: '1px solid rgba(9,107,225,0.8)',
            pointerEvents: 'auto',
            overflow: "auto",
            borderRadius: 8
        }} className="layout-v">
            <div style={{
                fontSize: 20,
                fontWeight: "bold",
                marginBottom: 12
            }} className='layout-h center'>
                <div className='fill w0'>
                    <div style={{
                        background: `url(${resourcePath.blockTitleBg})`,
                        height: 36,
                        backgroundSize: '100% 100%',
                        fontSize: 18,
                        lineHeight: '36px',
                        paddingLeft: 12,
                        fontWeight: "bold",
                        overflow: "hidden"
                    }} title={item?.zdm}>
                        {item?.zdm || '热成像云台详情'}
                    </div>
                </div>
                <div>
                    <Button size="small" icon={<CloseOutlined />} style={{
                        // color: "#fff"
                        background: "#00000000"
                    }} onClick={e => {
                        props?.onClose?.()
                    }} />
                </div>
            </div>
            <div className='fill h0 layout-v '>
                <div className='fill h0 layout-v'>
                    <LittleTitle >
                        <div className='layout-h center' style={{
                            justifyContent: 'space-between',
                            paddingRight: 12
                        }}>
                            <div>基本信息</div>
                            <div>
                                <Radio.Group size='small' buttonStyle='outline' value={currentPanel} onChange={handleChange}>
                                    {/* <Radio.Button value={1}>监测数据</Radio.Button>
                                    <Radio.Button value={2}>折线图</Radio.Button> */}
                                    <Radio.Button value={3}>视频监测</Radio.Button>
                                </Radio.Group>
                            </div>
                        </div>
                    </LittleTitle>
                    <div className='fill h0' style={{
                        padding: 12
                    }} ref={rootRef}>
                        {/* <video controls autoplay loop width="330" height="350">
                            <source src={`${process.env.PUBLIC_URL}/模拟火灾.mp4`} type="video/mp4" />
                            Your browser does not support the video tag.
                        </video> */}
                        {/* <ScrollTable parentNode={rootRef.current} size={"small"} bordered columns={[{
                            title: '站点名称',
                            dataIndex: 'zdmc',
                            ellipsis: true
                        },
                        {
                            title: '火焰高度',
                            dataIndex: 'hygd',
                            ellipsis: true
                            
                        },
                    {
                        title: '空气湿度',
                        dataIndex: 'kqxd',
                        ellipsis: true

                    },
                {
                    title: '热辐射',
                    dataIndex: 'rfs',
                    ellipsis: true
                }]} dataSource={datas}
                            pagination={{
                                current: params.pageNum,
                                pageSize: params.pageSize,
                                simple: true,
                                total,
                                onChange: (page) => {
                                    setParams(params => {
                                        return {
                                            ...params,
                                            pageNum: page
                                        }
                                    })
                                }
                            }}
                        /> */}

                    </div>
                </div>
                {/* <div className='fill h0 layout-v'>
                    <LittleTitle >
                        <div className='layout-h center' style={{
                            justifyContent: "space-between",
                            paddingRight: 8
                        }}>
                            <div>研判分析</div>
                            <div>
                                <Radio.Group size="small" value={ypType} onChange={e => {
                                    setYpType(e.target.value)
                                }} buttonStyle="solid">
                                    <Radio.Button value={1}>影响范围</Radio.Button>
                                    <Radio.Button value={2}>救援保障</Radio.Button>
                                </Radio.Group>
                            </div>
                        </div>
                    </LittleTitle>
                    <div className='fill h0 layout-v' style={{
                        padding: 12
                    }}>
                        <Space style={{
                            whiteSpace:'nowrap'
                        }}>
                            <Radio.Group size='small' value={radius} onChange={e => {
                                setRadius(e.target.value)
                            }} buttonStyle="solid">
                                <Radio.Button value={5}>5km</Radio.Button>
                                <Radio.Button value={10}>10km</Radio.Button>
                                <Radio.Button value={15}>15km</Radio.Button>
                                <Radio.Button value={20}>20km</Radio.Button>
                            </Radio.Group>

                            <InputNumber size='small' placeholder='其它数值' addonAfter={"km"} style={{
                                width: 120
                            }} onChange={value => {
                                setRadius(value)
                            }} />
                        </Space>
                        <div className='fill' style={{
                            paddingTop: 12
                        }}>

                            <Table size='"small' bordered columns={[{
                                title: '影响机构',
                                dataIndex: 'name',
                                width:180,
                                ellipsis:true
                            }, {
                                title: '影响数量',
                                dataIndex: 'count',
                                align: "right",
                                render: (text) => {
                                    return text + '处'
                                }
                            }, {
                                render: (text, record) => {
                                    return <Button type="link" size="small" style={{
                                        padding: 0
                                    }} onClick={() => handleButtonClick(record)}>详情</Button>
                                }
                            }]}
                                showHeader={false}
                                dataSource={yxList} />
                        </div>
                    </div>
                </div> */}
            </div>
        </div>

    </PanelRight> : null


}